<template>
  <div class="login-container">
    <div class="login-wrapper">
      <div class="login-form" v-if="!isLogin">
        <h2>用户登录</h2>
        <van-field v-model="username" label="用户名" placeholder="请输入用户名" />
        <van-field v-model="password" type="password" label="密码" placeholder="请输入密码" />
        <div class="login-button">
          <van-button type="primary" @click="handleLogin">登录</van-button>
        </div>
      </div>
      <div class="login-form" v-else>
        <h2>注销</h2>
        <div class="login-button">
          <van-button type="primary" @click="handleLogout">注销</van-button>
        </div>
      </div>
    </div>
    <div class="login-footer">
      <div class="login-footer-text">
        <span> 账号：admin 密码：admin123 </span>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/user'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  computed: {
    isLogin() {
      return this.$store.getters.token
    }
  },
  methods: {
    async handleLogin() {
      // 这里可以添加登录逻辑，比如调用API
      console.log('用户名:', this.username)
      console.log('密码:', this.password)
      const res = await login({ username: this.username, password: this.password })
      this.$store.commit('SET_TOKEN', res.token)
      // console.log(res)
      // 示例：调用登录接口
      // login({ username: this.username, password: this.password })
      //   .then(response => {
      //     // 处理登录成功
      //   })
      //   .catch(error => {
      //     // 处理登录失败
      //   })
    },
    handleLogout() {
      this.$store.commit('SET_TOKEN', '')
    }
  }
}
</script>

<style lang="scss">
.login-container {
  background: #f5f5f5;
  height: 100vh;
  box-sizing: border-box;

  .login-wrapper {
    padding: 50px 12px 12px 12px;

    .login-form {
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

      h2 {
        text-align: center;
        margin-bottom: 20px;
        color: #333;
      }

      .van-cell {
        margin-bottom: 15px;
      }

      .login-button {
        margin-top: 20px;
        text-align: center;

        .van-button {
          width: 100%;
        }
      }
    }
  }
}
</style>
